<template>
	<view class="point-wrap" :data-theme="themeStyle">
		<mescroll-uni @getData="getData" refs="mescroll" :size="10">
			<block slot="list">
				<!-- 头部轮播 -->
				<view class="point-top ns-bg-color" :style="'background-image: url(' + $util.img('/upload/uniapp/point/point-shop.png') + ')'" v-if="isLogin">
						<view class="point-num">{{ point ? parseInt(point) : 0 }}</view>
						<view class="point-rule" @click="openPointPopup()">
							<text class="iconfont iconbangzhu1"></text>
							积分兑换规则
						</view>
					<view class="point-opection">
						<view @click="jumpPage('/otherpages/member/point/point')">积分明细</view>
						<view @click="jumpPage('/promotionpages/point/order_list/order_list')">兑换记录</view>
					</view>
				</view>
				<view class="point-top ns-bg-color active" :style="'background-image: url(' + $util.img('/upload/uniapp/point/point_01.png') + ')'" v-else>
					<view class="login ns-margin-bottom" @click="login">立即登录</view>
					<view class="point-rule">登录查看我的积分</view>
				</view>
				
				<!-- <view class="point-category">
					<view class="item" v-for="(item, index) in categoryList" :key="index" @click="categoryChange(item.id)">
						<text :class="item.id == selectCategoryId ? 'active ns-text-color ns-border-color-bottom' : ''">{{ item.name }}</text>
					</view>
				</view> -->
				
				<view class="goods-container">
					<view class="good_list">
						<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="toDetail(item,selectCategoryId)">
							<view class="imgs">
								<block v-if="item.type == 2">
									<image :src="$util.img(item.image)?$util.img(item.image):$util.img('upload/uniapp/point/coupon.png')" mode="aspectFit"></image>
								</block>
								<block v-else-if="item.type == 3">
									<image :src="$util.img(item.image)?$util.img(item.image):$util.img('upload/uniapp/point/hongbao.png')" mode="aspectFit"></image>
								</block>
								<block v-else>
									<image :src="$util.img(item.image)" @error="imageError(index)" mode="aspectFit"></image>
								</block>
								<!-- <image :src="$util.img(item.image)?$util.img(item.image):$util.img('upload/uniapp/point/coupon.png')"></image> -->
								<!-- <view class="inventory">库存：{{ item.stock }}</view> -->
							</view>
							<view class="goods-info">
								<view class="goods-title">
									<view class="ns-text-color-black">{{ item.name }}</view>
								</view>
								<view class="goods-num">
									<view class="goods-info-desc ns-text-color">
										<text class="iconfont iconjifen"></text>
										<text class="ns-font-size-lg">{{ item.point }}</text>
										<text v-if="item.price !== '0.00'" class="ns-font-size-lg">+{{$lang('common.currencySymbol')}}{{item.price}}</text>
									</view>
									<view class="goods-stock">
										<text>库存：{{ item.stock }}</text>
										<view class="ns-bg-color" :class="item.stock == 0? 'goods-desc-save-active':''"style="background:linear-gradient(270deg, #ff5a01, #ffb644);"  >{{item.stock == 0? '已售罄':'立即兑换'}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view v-if="goodsList.length == 0" style="padding-top:0">
					<ns-empty
						:text="selectCategoryId == 1 ? '暂时没有可兑换的商品哦！' : selectCategoryId == 2 ? '暂时没有可兑换的优惠券哦！' : '暂时没有可兑换的红包哦！'"
						:fixed='!1'
					></ns-empty>
				</view>
			</block>
		</mescroll-uni>
		<!-- 弹出规则 -->
		<view @touchmove.prevent.stop>
			<uni-popup ref="pointPopup" type="bottom">
				<view class="tips-layer">
					<view class="head" @click="closePointPopup()"><view class="title">积分说明</view><text class="iconfont iconclose"></text></view>
					<view class="body">
						<view class="detail ns-margin-bottom">
							<view class="uni-bold">积分的获取</view>
							<view class="ns-font-size-sm">1、积分可在注册、签到、分享、消费、充值时获得。</view>
							<view class="ns-font-size-sm">2、在购买部分商品时可获得积分。</view>
							<view class="uni-bold">积分的使用</view>
							<view class="ns-font-size-sm">1、积分可用于兑换积分中心的商品。</view>
							<view class="ns-font-size-sm">2、积分可在参与某些活动时使用。</view>
							<view class="ns-font-size-sm">3、积分不得转让，出售，不设有效期。</view>
							<view class="uni-bold">积分的查询</view>
							<view class="ns-font-size-sm">1、积分可在会员中心中查询具体数额以及明细。</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-login ref="login"></ns-login>
		<ns-show-toast></ns-show-toast>
	</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import globalConfig from '@/common/js/golbalConfig.js';
import nsShowToast from '@/components/ns-show-toast/ns-show-toast.vue'
export default {
	components: {
		uniPopup,
		nsShowToast
	},
	data() {
		return {
			mescroll: null,
			categoryList: [
				{
					id: 1,
					name: '商品'
				},
				{
					id: 2,
					name: '优惠券'
				},
				{
					id: 3,
					name: '红包'
				}
			],
			selectCategoryId: 1,
			goodsList: [],
			isLogin: false,
			point: 0,
		};
	},
	onLoad(options) {
	},
	mixins:[globalConfig],
	onShow() {
		// 刷新多语言
		
		if(!this.addonIsExit.pointexchange){
			this.$util.showToast({
				title:'商家未开启积分商城',
				mask:true,
				duration:2000
			})
			setTimeout(()=>{
				this.$util.redirectTo('/pages/index/index/index',{},'redirectTo')
			},2000)
			return;
		}
		this.$langConfig.refresh();
		this.getAccountInfo();
	},
	methods: {
		jumpPage(url){
			this.$util.redirectTo(url)
		},
		// 打开积分说明弹出层
		openPointPopup() {
			this.$refs.pointPopup.open();
		},
		// 打开积分说明弹出层
		closePointPopup() {
			this.$refs.pointPopup.close();
		},
		//获取积分商品详情
		getData(mescroll) {
			this.mescroll = mescroll;
			this.$api.sendRequest({
				url: '/pointexchange/api/goods/page',
				data: {
					page_size: mescroll.size,
					page: mescroll.num,
					type: this.selectCategoryId
				},
				success: res => {
					let newArr = [];
					let msg = res.message;
					if (res.code == 0 && res.data) {
						newArr = res.data.list;
					} else {
						this.$util.showToast({
							title: msg
						});
					}
					mescroll.endSuccess(newArr.length);
					//设置列表数据
					if (mescroll.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
					this.goodsList = this.goodsList.concat(newArr); //追加新数据
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail() {
					//联网失败的回调
					mescroll.endErr();
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		//分类切换
		categoryChange(e) {
			this.selectCategoryId = e;
			this.mescroll.resetUpScroll();
		},
		//跳转至详情页面
		toDetail(item,selectCategoryId) {
			this.$util.redirectTo('/promotionpages/point/detail/detail', {
				id: item.id
			});
		},
		//获取个人
		getAccountInfo() {
			if (uni.getStorageSync('token')) {
				this.isLogin = true;
				this.$api.sendRequest({
					url: '/api/memberaccount/info',
					data: {
						account_type: 'point'
					},
					success: res => {
						if (res.code == 0 && res.data) {
							this.point = res.data.point;
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					}
				});
			} else {
				this.isLogin = false;
			}
		},
		//跳转至登录页面
		login() {
			this.$refs.login.open('/promotionpages/point/list/list');
		},
		imageError(index) {
			this.goodsList[index].image = this.$util.getDefaultImage().default_goods_img;
			this.$forceUpdate();
		}
	},
	onShareAppMessage(res) {
		var title = '积分兑换，好礼带回家哦';
		var path = '/promotionpages/point/list/list';
		return {
			title: title,
			path: path,
			success: res => {},
			fail: res => {}
		};
	}
};
</script>

<style lang="scss">
//头部
.point-top {
	width: 702rpx;
	height: 300rpx;
	margin: 0 auto;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-size: cover;
	background-repeat: no-repeat;
	margin-top: 12rpx;
		.point-num {
			line-height: 1;
			font-size: 80rpx;
			color: #fff;
			margin-top: 40rpx;
		}

		.login {
			display: inline-block;
			padding: 4rpx $ns-padding;
			border: 1rpx solid $ns-border-color-gray;
			border-radius: $ns-border-radius;
			color: #ffffff;
		}

		.point-rule {
			font-size: $ns-font-size-base;
			line-height: 1;
			color: #fff;
			margin-top: 30rpx;

			.iconfont {
				margin-right: 10rpx;
			}
		}

	.point-opection {
		width: 50%;
		display: flex;
		justify-content: space-between;
		line-height: 1;
		margin-top: 49rpx;
		view {
			line-height: 1;
			width: 162rpx;
			height: 48rpx;
			border: 1rpx solid #ffffff;
			text-align: center;
			border-radius: 24rpx;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: $ns-font-size-base;
		}
	}
}

.point-top.active {
	justify-content: center;
}

//分类
.point-category {
	width: 100%;
	height: 80rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #ffffff;
	padding: 0 $ns-padding;
	box-sizing: border-box;

	.item {
		display: inline-block;
		padding: 15rpx $ns-padding;
		margin-right: 20rpx;
		position: relative;
		width: 30%;
		text-align: center;
		.active {
			border-bottom: 1px solid #FFF;
		}
	}

	.item text {
		display: inline-block;
	}

	.item:last-child {
		margin-right: 0;
	}
}

.goods-container .good_list {
	padding: 20rpx;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	

	view.goods-item {
		width: 49%;
		background: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-bottom: 18rpx;

		.imgs {
			width: 298rpx;
			height: 306rpx;
			overflow: hidden;
			text-align: center;

			image {
				width: 100%;
				height: 100%;
			}
			.inventory{
				width: 100%;
				height: 46rpx;
				background:rgba(0,0,0,.4);
				position: absolute;
				left: 0;
				bottom: 0;
				color: #fff;
				
			}
		}
		
		.goods-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.goods-title {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				font-size: $ns-font-size-base;
				color: #000;
				margin-top: 19rpx;
				view {
					line-height: 1.3;
					font-size: $ns-font-size-base;
					color: #000;
				}
			}
			.goods-num {
				display: flex;
				flex-direction: column;
				
				.goods-info-desc {
					display: flex;
					align-items: center;
					line-height: 1;
					margin-top: 24rpx;
					font-size: $ns-font-size-base;
				}
				
				.goods-stock {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					line-height: 1;
					margin-top: 16rpx;
					text {
						color: #A9A9A9;
						font-size: $ns-font-size-x-sm;
					}
					view {
						line-height: 1;
						width: 110rpx;
						height: 36rpx;
						color: #fff;
						font-size: $ns-font-size-base;
						border-radius: 24rpx;
						padding:4rpx 6rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}

	view.goods-item:nth-child(2n + 2) {
		margin-right: 0;
	}
}

.goods-container .good_list > view.goods-item .info {
	padding: $ns-padding;
	box-sizing: border-box;

	.goods-info {
		display: flex;
		flex-direction: column;
		margin-top: 10rpx;
		
		.goods-info-desc {
			display: flex;
			align-items: center;
		}
		
		.goods-stock {
			display: flex;
			justify-content: space-between;
			align-items: center;
			text {
				&:nth-child(1) {
					color: #A9A9A9;
					font-size: $ns-font-size-x-sm;
				}
				&:nth-child(2) {
					width: 120rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					color: #fff;
					font-size: $ns-font-size-x-sm;
					border-radius: 24rpx;
				}
			}
			.goods-desc-save-active {
				background: #BCBCBC;
			}
		}
	}
}

.goods-container .good_list > view.goods-item .info view.goods-title navigator {
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	width: 100%;
	line-height: 40rpx;
	max-height: 80rpx;
	height: 80rpx;
}

.imgs image {
	width: 100%;
}

.goods-container .good_list > view.goods-item .goods_price view.unit {
	font-size: $ns-font-size-base;
}

.ns-border-color-gray-shade-20 {
	border-color: #b7b7b7 !important;
}



/* 说明弹框 */
.tips-layer {
	background: #fff;
	z-index: 999;
	height: 40%;
	width: 100%;
}
.tips-layer .head{
	position: relative;
}
.tips-layer .title {
	
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: $ns-font-size-x-lg;
	font-weight: 700;
	
}
.tips-layer text{
		position: absolute;
		top:4rpx;
		right: 22px;
		font-size: $ns-font-size-xxx-lg;
		font-weight: 500
	}

.tips-layer .body {
	width: 100%;
	height: calc(100% - 80rpx);
	overflow-y: scroll;
}

.tips-layer .body::-webkit-scrollbar {
	display: none;
}

.tips-layer .body .detail {
	padding: 20rpx;
}

.tips-layer .body .detail .ns-font-size-lg {
	margin-bottom: 10rpx;
}
</style>
